<template>
  <div class="send-access">
    <div id="header">
      <el-button type="primary" @click="clickAddMember">添加用户</el-button>
    </div>
    <template v-if="data.length">
      <dl v-for="item in data" :key="item.id" @click="clickDelete(item.id)">
        <dt>
          <img :src="item.member.avatar" />
        </dt>
        <dd>{{item.member.nickname}}</dd>
      </dl>
    </template>
    <template v-else>
      <h3 class="empty">暂无数据</h3>
    </template>

    <!--S添加用户区域-->
    <el-dialog
      title="添加发红包用户"
      :visible.sync="AddDialog.show"
    >
      <el-form
        ref="form"
        :model="AddDialog.form_data"
        :rules="AddDialog.form_rules"
      >
        <el-form-item label="扫一扫添加用户" prop="member_id">
          <member-input
            v-model="AddDialog.form_data.member_id"
            :toggle="AddDialog.refresh_qrcode"
          >
          </member-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addMember">确定添加</el-button>
      </span>
    </el-dialog>
    <!--E添加用户区域-->
  </div>
</template>

<script>
import MemberInput from '../../../components/MemberInput'
export default {
  name: 'SendAccess',
  components: {
    MemberInput
  },
  data() {
    return {
      data: [],
      AddDialog: {
        show: false,
        // 刷新添加用户二维码
        refresh_qrcode: 0,
        form_data: {
          member_id: 0
        },
        form_rules: {
          member_id: [
            { required: true, message: '请设置用户信息', trigger: 'blur' },
            { type: 'number', min: 1, message: '请设置用户信息', trigger: 'blur' }
          ]
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 用户列表
    getList() {
      this.$get('send-access')
        .then((res) => {
          this.data = res.data.data
        })
    },
    // 点击添加
    clickAddMember() {
      this.AddDialog.show = true
      this.AddDialog.refresh_qrcode = new Date().getTime()
    },
    // 确认添加用户
    addMember() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$post('send-access', {
            member_id: this.AddDialog.form_data.member_id
          })
            .then(() => {
              this.AddDialog.show = false
              this.AddDialog.form_data.member_id = 0
              this.getList()
            })
            .catch((error) => {
              this.$handleError(error)
            })
        }
      })
    },
    // 点击删除
    clickDelete(id) {
      this.$confirm('确定删除吗?', '提示')
        .then(() => {
          this.$del('send-access/' + id)
            .then(() => {
              this.getList()
            })
            .catch((error) => {
              this.$handleError(error)
            })
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .send-access{
    #header{
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
    }
    dl{
      float: left;
      margin: 0 10px 10px 0;
      width: 60px;
      height: 80px;
      padding: 0;
      cursor: pointer;
      dt{
        img{
          display: block;
          width: 60px;
          height: 60px;
        }
      }
      dd{
        margin: 0;
        width: 60px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        text-align: center;
        color: #97a8be;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    h3.empty{
      color: #97a8be;
      font-size: 12px;
      text-align: center;
      margin-top: 30px;
    }
  }
</style>
